<template>
  <div id="dl">
      <div id="dl-header">
        <span @click="mixins">&lt;</span>
        <a href="#" @click="fun()">注册</a>
      </div>
      <div id="dl-1">
        <img src="	https://www.chawo.com/wap/static/logo-font.png">
      </div>
      <div id="dl-2">
        <div id="dl-2-1">
          <input type="text" placeholder="账号/手机号">
        </div>
        <div id="dl-2-1">
          <input type="text" placeholder="密码">
        </div>
      </div>
      <div id="anniu">
        <button>登录</button>
      </div>
      <div id="tongyi">
        <div id="tongyi-l">
          <form>
            <input type="checkbox">
          </form>
        </div>
        <div id="tongyi-r">
          <span>我已阅读并同意茶窝网</span>
          <a href="">用户协议</a>、
          <a href="">隐私协议</a>
        </div>
      </div>
  </div>
</template>

<script>
import methodmixins from "@/mixins/index.js";
export default {
  methods:{
        fun(){
            // 编程式导航   
            this.$router.push("/zhuce")
        }
    },
  mixins: [methodmixins],

}
</script>

<style scoped>
  #dl{
    width: 100%;
  }
  #dl-header{
    width: 100%;
    height: .44rem;
    line-height: .44rem;
    /* background-color: pink; */
    display: flex;
    justify-content: space-between;
  }
  #dl-header span{
    font-size: .25rem;
    color: gray;
    margin-left: .2rem;
  }
  #dl-header a{
    font-size: .16rem;
    color: gray;
    font-weight: 700;
    margin-right: .2rem;
  }
  #dl-1{
    margin: 70px auto;
    text-align: center;
  }
  #dl-1 img{
    width: .97rem;
    height: .29rem;
  }
  #dl-2 {
    text-align: left;
    padding: 6px 25px;
  }
  #dl-2-1{
    border-bottom: 0.5px solid #ccc;
    margin-bottom: .25rem;
  }
  #dl-2-1 input{
    margin: .03rem 0;
    font-size: .18rem;
  }
  #anniu {
    text-align: center;
  }
  #anniu button{
    background-color: rgba(201,20,28,.5);
    color: #fff;
    border: none;
    font-size: 15px;
    margin: 6px 0;
    border-radius: 30px;
    width: 3.25rem;
    height: .39rem;
  }
  #tongyi{
    padding: .1rem .25rem;
    font-size: .1rem;
    color: #000;
    text-align: center;
    display: flex;
  }
  #tongyi-l form{
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 50%;
    border: 1px solid black;
    overflow: hidden;
  }
  #tongyi-l input{
    width: 0.15rem;
    height: 0.15rem;
    display: block;
  }
  #tongyi-r{
    margin-left: .05rem;
    font-size: .15rem;
  }
  #tongyi-r span{
    color: gray;
  }
  #tongyi-r a{
    color: red;
  }
</style>